<template>
  <div>
    <form-tinymce
      :value="changeValue"
      @change="handleInputChange"
      :toolbar="toolbar"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  name: "TRichText"
};
</script>

<script setup>
import { ref, watch } from "vue";
import FormTinymce from "../../tinymce/index.vue";

const props = defineProps({
  value: {
    type: String
  },
  placeholder: {
    type: String
  }
});

const toolbar = ref(
  " styleselect fontsizeselect bold italic underline strikethrough undo redo  blockquote removeformat alignleft aligncenter alignright  subscript superscript  hr bullist numlist link image charmap preview  pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen "
);

const changeValue = ref(props.value);

const emit = defineEmits(["update:value"]);

watch(
  () => props.value,
  val => {
    changeValue.value = val;
  }
);

const handleInputChange = val => {
  changeValue.value = val;
  emit("update:value", val);
};
</script>

<style scoped></style>
